<template>
  <!-- <a-descriptions title="糖尿病教育" bordered :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }">
    <a-descriptions-item label="接受教育情况" :span="2">
      {{ report.received }}
    </a-descriptions-item>
    <a-descriptions-item label="希望学习的糖尿病知识" :span="2" v-if="report.hope">
      {{ report.hope }}
    </a-descriptions-item>
  </a-descriptions> -->
  <div class="container">
    <div style="">
      <div class="card_nd_title">
        <span>糖尿病教育</span>
        <div class="line" style="width:80px;"></div>
      </div>
      <div class="card_content">
        <div class="item" style="font-size: 16px;color: #000;">糖尿病教育</div>
        <a-row class="item" v-if="report.received">
          <a-col :span="3">是否接受教育：</a-col>
          <a-col :span="16">{{ report.received }}</a-col>
        </a-row>
        <a-row class="item" v-if="report.hope">
          <a-col :span="colspan.left">希望了解哪方面关于糖尿病知识：</a-col>
          <a-col :span="colspan.right">{{ report.hope }}</a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Education',
  props: ['report'],
  data() {
    return {
      colspan: {
        left: 5,
        right: 16
      }
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
// /deep/ .ant-descriptions-item-label {
//   width: 25% !important;
// }
// /deep/ .ant-descriptions-item-content {
//   width: 75% !important;
// }
.container {
  padding: 50px 24px 0 24px;
}

.card_nd_title {
  span {
    font-size: 16px;
    // padding-left: 10px;
    font-weight: bold;
    color: #000;
  }
}
.line {
  height: 6px;
  border-radius: 6px;
  // margin-left: 10px;
  background-color: #00b5d4;
  opacity: 0.3;
}
.item {
  margin-bottom: 20px;
}
.card_content {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid #ccc;
}
</style>

